<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <script src="js/alert.js"></script>
    <title>消费记录</title>

    <style type="text/css">
        #data {
            padding: 0 5% 0 5%;
        }
        .bean {
            border-bottom: 1px solid #d4d4d4;
            height: 4.8em;
            padding-top: 1em;
        }
    </style>

</head>
<body>
<div id="data">

    <div class="bean" onclick="toItem(1)">
        <div style="padding-bottom: 3em;">
            <div style="text-align: left;float: left;font-size: 1em;">单号:ASDJJJJKWU1233</div>
            <div style="text-align: right;float: right;font-size: 1em;">消费金额:232.0</div>
            <div style="text-align: left;float: left;font-size: 1em;width: 50%;">广场店</div>
            <div style="text-align: right;float: right;font-size: 1em;">正常零售</div>
        </div>
        <div>
            <div style="text-align: left;width: 50%;float: left;color: #979797;font-size: 0.9em;">点击查看详情>>></div>
            <div style="text-align: right;width: 50%;float: left;color: #979797;font-size: 0.9em;">20190203 12:12:12
            </div>
        </div>
    </div>

</div>

</body>
<script src="js/jquery.min.js"></script>
<script type="">
    $(document).ready(function () {
        getdata()
    });
    function toItem(id) {
        location.href = "vip-retail-item.html?id="+id;
    }
    function getdata() {
        $.ajax({
            "url": "/vip/retailrecord/",
            "type": "POST",
            "dataType": "json",
            "success": function (json) {
                $("#data").empty();
                var list = json.data;
                for (var i = 0; i < list.length; i++) {
                    var html = '<div class="bean" onclick="toItem(#{ID})">\n' +
                        '        <div style="padding-bottom: 3em;">\n' +
                        '            <div style="text-align: left;float: left;font-size: 1em;">单号:#{CODE}</div>\n' +
                        '            <div style="text-align: right;float: right;font-size: 1em;">消费金额:#{PRICE}</div>\n' +
                        '            <div style="text-align: left;float: left;font-size: 1em;width: 50%;">#{STORE}</div>\n' +
                        '            <div style="text-align: right;float: right;font-size: 1em;">#{TYPE}</div>\n' +
                        '        </div>\n' +
                        '        <div>\n' +
                        '            <div style="text-align: left;width: 50%;float: left;color: #979797;font-size: 0.9em;">点击查看详情>>></div>\n' +
                        '            <div style="text-align: right;width: 50%;float: left;color: #979797;font-size: 0.9em;">#{DATE}</div>\n' +
                        '        </div>\n' +
                        '    </div>';

                    html = html.replace("#{ID}", list[i].id);
                    html = html.replace("#{CODE}", list[i].code);
                    html = html.replace("#{DATE}", list[i].date);
                    html = html.replace("#{TYPE}", list[i].type);
                    html = html.replace("#{STORE}", list[i].store);
                    html = html.replace("#{PRICE}", list[i].price);
                    $("#data").append(html);
                }

            }
        })
    }

</script>
</html>